<template>
	<view>
		<view class="navbar">
			<view class="opbar">
				<image src="../../../static/imgs/backicon.png" @click="back"></image>
				<image src="../../../static/imgs/moreicon.png"></image>
			</view>
			<view class="tab">
				<view class="right-item" @click="navTo('../planeTicket/planeTicket')">
					<view class="btn">
						机票
					</view>
				</view>
				<view class="left-item">
					<view class="btn">
						火车票
					</view>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="tab">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color='#3587F7'></u-tabs>
			</view>
			<view class="content">
				<view class="destination">
					<text @click="navTo('../cityList/cityList')">深圳</text>
					<view class="icon" @click="exchange">
						<image class="niao" src="../../../static/imgs/huocheto.png"></image>
						<image class="quan" src="../../../static/imgs/jipiao-quan.png"></image>
					</view>
					<text @click="navTo('../cityList/cityList')">武汉</text>
				</view>

				<view class="date-container">
					<view class="date-item" @click="showCalendar=true">
						<text class="date">1月20日</text>
						<text class="diff">明天</text>
					</view>
					<view class="date-item" v-if="current ==1" @click="showCalendar=true">
						<text class="date">1月23日</text>
						<text class="diff">后天</text>
					</view>
				</view>

				<view class="checkbox">
					<u-checkbox-group>
						<u-checkbox shape="circle" v-model="checked">学生票</u-checkbox>
					</u-checkbox-group>
					<u-checkbox-group>
						<u-checkbox shape="circle" v-model="checked">高铁动车</u-checkbox>
					</u-checkbox-group>
				</view>

				<view class="searchBtn" @click="navTo('./trainList')">
					查询
				</view>

			</view>
		</view>
		<view class="tips">
			<view class="title">
				多重服务保障
			</view>
			<view class="tips-ul">
				<view class="tips-li">
					<view style="font-size: 24rpx;color: #333333;font-weight: bold;">
						<image class="iconMini" src="../../../static/imgs/hcmini2.png" mode=""></image>价格保障
					</view>
					<text style="margin-top: 6rpx;">退改标准服务</text>
					<text>支付后不涨价</text>
				</view>
				<view class="tips-li">
					<view style="font-size: 24rpx;color: #333333;font-weight: bold;">
						<image class="iconMini" src="../../../static/imgs/hcmini3.png" mode=""></image>出行安心
					</view>
					<text style="margin-top: 6rpx;">全力保障出行</text>
					<text>风险及时预警</text>
				</view>
				<view class="tips-li">
					<view style="font-size: 24rpx;color: #333333;font-weight: bold;">
						<image class="iconMini" src="../../../static/imgs/hcmini4.png" mode=""></image>灾害补偿
					</view>
					<text style="margin-top: 6rpx;">突发自然灾害</text>
					<text>补偿退票损失</text>
				</view>
				<view class="tips-li">
					<view style="font-size: 24rpx;color: #333333;font-weight: bold;">
						<image class="iconMini" src="../../../static/imgs/hcmini1.png" mode=""></image>售后保障
					</view>
					<text style="margin-top: 6rpx;">自助退改便捷</text>
					<text>客服7*24在线</text>
				</view>
			</view>
			<view class="foot">
				<image class="iconMini" src="../../../static/imgs/hcmini1.png" mode="">机票预订服务提供方：深圳爱世界国际旅行社有限公司
			</view>
		</view>

		<u-calendar v-model="showCalendar" :change-year='false' :min-date="minDate" :max-date='maxDate' :max-year='maxYear'
		 :min-year='maxYear' mode="date" @change='changeFn'></u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				maxYear: '',
				maxDate: '',
				minDate: '',
				showCalendar: false,
				checked: false,
				current: 0,
				list: [{
					name: '单程'
				}, {
					name: '往返'
				}],
			}
		},
		onLoad() {
			this.initDate()
		},
		methods: {
			initDate() {
				// 最小日期
				let date = new Date()
				this.maxYear = date.getFullYear()
				this.minDate = date.getFullYear() + '-' + this.formatNum(date.getMonth() + 1) + '-' + this.formatNum(date.getDay())
				// 最大日期
				let date1 = new Date(date)
				date1.setDate(date.getDate() + 29)
				this.maxDate = date1.getFullYear() + '-' + this.formatNum(date1.getMonth() + 1) + '-' + this.formatNum(date1.getDay())
			},
			// 日期格式化
			formatNum(num) {
				return num < 10 ? '0' + num : num + '';
			},
			exchange() {

			},
			changeFn(e) {
				console.log(e)
			},
			change(index) {
				this.current = index
			},
			back() {
				uni.switchTab({
					url:'/pages/homePage/homePage'
				})
			},
			navTo(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navbar {
		width: 100%;
		height: 30vh;
		background-image: url(../../../static/imgs/train.png);
		background-position: center center;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;

		.status-bar {
			// height: var(--status-bar-height);
			width: 100%;
			background-color: transparent;
			background: transparent;
		}

		.opbar {
			margin-top: var(--status-bar-height);
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding:10rpx 40rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.tab {
			background: rgba(0, 0, 0, 0.5);
			width: 95%;
			margin: 0 auto;
			color: #FFFFFF;
			font-size: 34rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 20rpx 20rpx 0 0;

			.left-item {
				width: 50%;
				padding: 15rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.btn {
					width: 330rpx;
					height: 66rpx;
					background: #FFFFFF;
					border-radius: 40rpx;
					font-size: 34rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #3587F7;
					line-height: 66rpx;
					text-align: center;
				}
			}

			.right-item {
				width: 50%;
				padding: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.container {
		width: 95%;
		height: 546rpx;
		background: #FFFFFF;
		box-shadow: 0px 16rpx 20rpx rgba(0, 0, 0, 0.05);
		border-radius: 0px 0px 16rpx 16rpx;
		margin: 0 auto;

		.content {
			padding: 0 20rpx;

			.destination {
				height: 110rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 40rpx;
				font-weight: bold;
				color: #333333;
				border-bottom: 2rpx solid #f4f4f4;
				padding: 0 40rpx;

				.icon {
					width: 60rpx;
					height: 60rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;

					.niao {
						position: absolute;
						width: 30rpx;
						height: 30rpx;
						top: 15rpx;
						left: 15rpx;
					}

					.quan {
						position: absolute;
						width: 60rpx;
						height: 60rpx;
						top: 0;
						left: 0;
					}
				}
			}

			.date-container {
				height: 110rpx;
				padding: 0 32rpx;
				color: #333333;
				border-bottom: 2rpx solid #f4f4f4;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.date {
					font-size: 40rpx;
					font-weight: bold;
				}

				.diff {
					font-size: 32rpx;
					font-weight: 400;
					margin-left: 20rpx;
				}

				.close {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.checkbox {
				padding: 0 32rpx;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #f4f4f4;
			}

			.searchBtn {
				width: 626rpx;
				height: 88rpx;
				background: linear-gradient(90deg, #F8B036 0%, #F9862D 100%);
				border-radius: 16rpx;
				margin: 36rpx auto 0;
				font-size: 34rpx;
				font-family: Segoe UI;
				font-weight: 400;
				line-height: 88rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}

	.tips {
		margin-top: 94rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-family: HappyZcool-2016;
			font-weight: 400;
			color: #53B794;

			&:before {
				content: " ";
				display: block;
				width: 52rpx;
				height: 2rpx;
				background: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, #53B794 100%);
				border-radius: 4rpx;
				margin-right: 16rpx;
			}

			&:after {
				content: " ";
				display: block;
				width: 52rpx;
				height: 2rpx;
				background: linear-gradient(90deg, #53B794 0, rgba(255, 255, 255, 0.02) 100%);
				border-radius: 4rpx;
				margin-left: 16rpx;
			}
		}

		.tips-ul {
			padding: 0 28rpx;
			display: flex;

			.tips-li {
				width: 174rpx;
				height: 174rpx;
				padding: 42rpx 0;

				text {
					display: block;
					font-size: 20rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #999999;
					text-align: center;
				}
			}
		}

		.foot {
			font-size: 20rpx;
			font-family: Segoe UI;
			font-weight: bold;
			color: #333333;
			text-align: center;
		}
	}

	.iconMini {
		width: 22rpx;
		height: 22rpx;
	}
</style>
